// JavaScript Document
  var $ = function (id) {
        return document.getElementById(id);
    }
    window.onload = function () {
        var oLis = $("tab").getElementsByTagName("li");
        var oDivs = $("tab").getElementsByTagName("div")[1].getElementsByTagName("div");
        var timer = null;//用来保存定时器
        var autoLi = 0;
        timer = setInterval(autoPlay, 1000);
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].index = i;
            
            oLis[i].onmouseover = function () {
                clearInterval(timer);//清除定时器，不干扰鼠标滑动的效果
                change(this.index);//将this.index作为参数传递给change方法
            }
            //绑定鼠标滑开的事件
            oLis[i].onmouseout = function () {
                change(this.index);
                timer = setInterval(autoPlay, 5000);//鼠标划开就可以执行定时器的行为了 定时器内要执行的函数为autoPlay函数中的行为
            }
        }
//        //先判断定时器是否执行 如果执行了清除 然后重新
//        if (timer) {
//            clearInterval(timer);
//            timer = null
//        }
        //定义change方法传入参数n n是为了接收自定义的属性
        function change(n) {
            //for循环将li和div的class默认样式清空
            for (var j = 0; j < oLis.length; j++) {
                oLis[j].className = "";
                oDivs[j].className = "";
            }
            //通过oLis[i].index = i;自定义属性 将n即为this.index传递给过来的
            oLis[n].className = "current";
            oDivs[n].className = "current";
            autoLi = n;//在使用定时器的时候 所显示的li标签
        }
        //定义一个autoPlay的函数，里面包含了要执行的行为
        function autoPlay() {
            autoLi++;//li页签逐渐递增
            if (autoLi >= oLis.length) {//判断递增的结果当到达最后一个的时候变为0，从第一个开始
                autoLi = 0;
            }
            change(autoLi);//将记录当前页签的变量作为参数传递给change方法，这样change方法接收的参数n就是autoLi，对应的li和div就会响应操作。
        }
    }